import React, { useState } from 'react'
import PageHeader from '../components/PageHeader'
import { wapper } from '../utils/hoc'
import { Grid, Image, Button, Space, List, Toast, Dialog } from 'antd-mobile'
import { SoundOutline, GiftOutline, GlobalOutline, VideoOutline, MailOutline, HandPayCircleOutline } from 'antd-mobile-icons'
import { useRouterHook } from '../utils/hooks'
const My: React.FC = () => {
  const { navigate } = useRouterHook()
  const [userInfo] = useState(JSON.parse(localStorage.getItem('userLoginInfo') || '{}'))
  const nearbyList = [
    {
      icon: <SoundOutline fontSize={26} />,
      name: '预约管理',
      path: '/appoint'
    },
    {
      icon: <GiftOutline fontSize={26} />,
      name: '个人信息',
      path: '/profile'
    },
    {
      icon: <GlobalOutline fontSize={26} />,
      name: 'Shopping',
      path: '/appoint'
    },
    {
      icon: <VideoOutline fontSize={26} />,
      name: 'Cinema',
      path: '/appoint'
    },
    {
      icon: <MailOutline fontSize={26} />,
      name: 'Post Office',
      path: '/appoint'
    },
    {
      icon: <HandPayCircleOutline fontSize={26} />,
      name: 'Bank',
      path: '/appoint'
    },
  ]
  const logout = async () => {
    const res = await Dialog.confirm({ content: '确认退出？' })
    if (res) {
      // 1-移除本地存储中的登录数据
      localStorage.removeItem('userLoginInfo')
      // 2-提示
      Toast.show('退出成功')
      // 3-自动跳转到登录页面
      navigate('/login')
    }
  }
  return (
    <>
      <PageHeader>
        <h3>个人中心</h3>
      </PageHeader>
      <div style={{ background: '#EEE' }}>
        <Grid columns={8} style={{ padding: 10, background: '#fff' }}>
          <Grid.Item span={2}>
            <Image fallback={<Image src="http://localhost:3000/uploads/avatar.png" />} lazy width={80} height={80} style={{ borderRadius: '50%' }} src={`http://localhost:3000${userInfo.avatar}`}></Image>
          </Grid.Item>
          <Grid.Item span={6}>
            <Space style={{ fontSize: 15 }} direction="vertical">
              <div>手机号：{userInfo.phone}</div>
              <div>姓名:{userInfo.name ? userInfo.name : '暂无数据'}</div>
              <div>账号类型: {userInfo.role_id === 1 ? '医生' : '患者'}</div>
              {userInfo.role_id === 1 ? <>
                <div>职称:{userInfo.title}</div>
                <div style={{ marginTop: 6 }}>所属医疗机构:{userInfo.bus_title}</div>
              </> : ''}
            </Space>
          </Grid.Item>
        </Grid>
        <Grid columns={userInfo.role_id === 1 ? 4 : 3} style={{ fontSize: 16, textAlign: 'center', margin: '5px 0', padding: '16px 0', background: '#fff' }}>
          <Grid.Item>
            0
            <p>获赞</p>
          </Grid.Item>
          <Grid.Item>
            0
            <p>关注</p>
          </Grid.Item>
          <Grid.Item>
            0
            <p>粉丝</p>
          </Grid.Item>
          {
            userInfo.role_id === 1 ? <Grid.Item>
              <Button onClick={() => navigate(`/doctor?id=${userInfo.id}`)} shape="rounded" size='mini'>个人主页</Button>
            </Grid.Item> : ''
          }
        </Grid>

        <List>
          {nearbyList.map(item => (
            <List.Item onClick={() => navigate(item.path)} prefix={item.icon} key={item.name}>
              {item.name}
            </List.Item>
          ))}
          <List.Item>
            <Button onClick={logout} block shape="rounded" color="primary">安全退出</Button>
          </List.Item>
        </List>

      </div>
    </>
  )
}

export default wapper(My, { title: '个人中心', requireLogin: true })